<template>
  <div class="import">
    <el-form :model="rulesForm" :inline="true" class="demo-form-inline">
      <el-form-item label="服务端数据源路径：">
        <el-input v-model="rulesForm.path"
                  style="width: 300px"
                  size="small"></el-input>
      </el-form-item>
      <el-form-item class="search-btn">
        <el-button type="primary"
                   size="small"
                   icon="el-icon-search"
                   :loading="tableLoading"
                   @click="rulePath">校验路径
        </el-button>
      </el-form-item>
    </el-form>

    <section class="set" v-if="showList">
      <hgroup>数据读取设置</hgroup>

      <div class="list-box">
        <el-table
          :data="tableData"
          border
          v-loading="tableLoading"
          height="calc(100vh - 245px)"
          class="table">
          <el-table-column
            align="center"
            fixed="left"
            prop="sourceSheetNo"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            label="源模式"
            prop="sourceSchema"
            show-overflow-tooltip
            min-width="260">
          </el-table-column>
          <el-table-column
            label="源数据表"
            prop="sourceSheetName"
            show-overflow-tooltip
            width="160">
          </el-table-column>
          <el-table-column
            label="目标表"
            prop="idTable"
            width="160">
            <template slot-scope="scope">
              <el-select size="small" v-model="scope.row.idTable">
                <el-option v-for="(item, index) in idCategoryList"
                           :key="index"
                           :label="item.tableName"
                           :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>

        <div class="set-foot">
          <div class="set-left">
            <div class="line" v-if="speedOfProgress>0"><div class="line-in" :style="{width: speedOfProgress + '%'}"></div></div>
            <span v-if="speedOfProgress>0">移交状态：检测中。。。</span>
          </div>
          <el-button size="small"
                     type="primary"
                     :loading="subLoading"
                     @click="handleSubmit">确定接收</el-button>
        </div>
      </div>

    </section>

  </div>
</template>

<script>
import { checkPath, confirmReceive } from '../../../../api/dataManage/dataImport'

export default {
  name: 'changeDataSourceReceive',
  props: {
    idCategoryList: {
      type: Array,
      default: () => ([])
    },
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showList: false,
      rulesForm: {
        path: ''
      },
      tableData: [],
      tableLoading: false,
      subLoading: false,
      speedOfProgress: 0 // 进度条
    }
  },
  methods: {
    rulePath () {
      if (!this.rulesForm.path) {
        this.$message.warning('请输入需要校验的地址！')
        return
      }
      const form = {
        path: encodeURI(this.rulesForm.path)
      }
      this.tableLoading = true
      checkPath(this.id, form).then(res => {
        this.$message.success('校验成功！')
        this.tableData = []
        res.data.data.map((item) => {
          this.tableData.push({
            sourceSheetNo: item.sourceSheetNo,
            sourceSchema: item.sourceSchema,
            sourceSheetName: item.sourceSheetName,
            idTable: ''
          })
        })
        this.showList = true
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSubmit () {
      // 确认接收
      this.speedOfProgress = 0
      const _timer = setInterval(() => {
        this.speedOfProgress++
        if (this.speedOfProgress >= 95) {
          this.speedOfProgress = 95
        }
      }, 1)
      this.subLoading = true
      confirmReceive(this.id, this.tableData).then(res => {
        this.$message.success('确认接收操作成功')
        this.subLoading = false
        this.rulesForm.path = ''
        this.showList = false
        this.tableData = []
        clearInterval(_timer)
        this.speedOfProgress = 100
        this.$emit('handleSuccess')
      }).catch(() => {
        clearInterval(_timer)
        this.speedOfProgress = 0
        this.subLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .import {
    padding: 0 20px;

    .set {
      hgroup {
        padding: 10px 20px;
        color: #fff;
        background: #40a9ff;
        border-radius: 4px 4px 0 0 ;
      }

      .set-foot{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 10px 10px 0;

        .set-left{
          width: calc(100% - 120px);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .line{
            width: calc(100% - 170px);
            height: 10px;
            background: #e3e3e3;
            border-radius: 5px;
            overflow: hidden;
            .line-in{
              height: 100%;
              background: #40a9ff;
            }
          }
        }

      }
    }

  }
</style>
